import React from 'react'

//react-router-dom 包提供了路由器插件,所有的组件都在一个路由器下
//路由器分为hash-router和broweRouter两种路由器,常用的是browserRouter
//Routes整合所有路由标签
//只要访问Navigate组件对应的地址,就会展示其to属性中组件展示的页面
import {Routes, Route, Navigate, useRoutes} from "react-router-dom"
import routes from "./routes"
// import Login from "./components/Login"
// import Main from "./components/Main"
// import NotFound from "./components/404"
// import Home from "./components/Main/Home"
// import About from "./components/Main/About"
// import {useRoutes} from "./routes"

export default function App() {
  //用于根据路由表,动态创建Routes和Route
  // return (
  //   <div className="outer">
  //     {
  //       useRoutes(routes)
  //     }
  //   </div>
  // )

  return (
    <div >
      <Routes>
        {
          routes.map(item => {
            return <Route path={item.path} element={item.element} key={item.path}></Route>
          })
        }
      </Routes>
      </div >
  )
    
      {/* <Routes>
        <Route path="/login" element={<Login />}></Route>
        <Route path="/main" element={<Main />}>
          <Route path="/main/home" element={<Home />}></Route>
          <Route path="/main/about" element={<About />}></Route>
        </Route>
        <Route path="*" element={<NotFound />}></Route>
        <Route path="/" element={<Navigate to="/login" />}></Route>
      </Routes> */}
}
